<template>
    <div v-if="detailData.status == 'running'">
        <div>
            <!--        <div>
                      <p class="info-item-name" v-if="tcpPortList.length != 0">仿真端口映射</p>
                    </div>-->
            <ul class="info-item">
                <li v-for="(tag, i) in tcpPortList" :key="i">
                    <span class="key">协议：{{tag.proxyProtocol}}</span>
                    <span class="key">容器端口：{{tag.containerPort}}</span>
                    <span class="key">映射端口：{{tag.nodePort}}</span>
                    <span class="key">映射地址：{{tag.endpoint}}</span>
                </li>
            </ul>
        </div>
        <br/>
        <br/>
        <div>
          <div>
            <p class="info-item-name" >节点容器信息</p>
          </div>
          <br/>
          <div>
            <div class="info-item"><span>业务节点:</span></div>
            <ul class="info-pad">
              <div><p>&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</p></div>
              <li v-for="(group, i) in jobPod" :key="i">
                <p class="key">节点分组-{{i}}</p>
                <div v-for="(pod, j) in group.pod_list" :key="j">
                  <p class="key">节点名称：{{pod.name}}</p>
                  <p class="val">节点id：{{pod.uid}}</p>
                  <p class="val">节点ip：{{pod.pod_ip}}</p>
                  <p class="val">进程数量：500</p>
                  <br/>
                </div>
              </li>
              <br/>
            </ul>
          </div>
        </div>
    </div>

</template>

<script>
    export default {
        data () {
            return {
                activeName: '1',
                simulationPod: [],
                jobPod: [],
                tcpPortList: []
            };
        },
        props: ['detailData'],
        async mounted () {
            this.$nextTick(async () => {
                await this.getData()
                this.simulationPod  = this.detailData.simulation_node_group;
                this.jobPod = this.detailData.node_group_list;
                this.tcpPortList = this.detailData.tcp_port_list
            })
        },
        components: {
        },
        methods: {
            handleClick() {},
            async getData() {
                await new Promise(resolve => {
                    setTimeout(() => {
                        this.target = ['上海', '北京', '广州', '深圳']
                        resolve()
                    }, 1000)
                })
                return
            }
        }
    }
</script>
<style lang="less" scoped>
    .info-item-name {
        line-height: 26px;
        color: #606266;
        padding: 8px 16px;
    }
    .info-item {
        margin: 0 16px;
        background: #FFF;

        li {
            display: flex;
            width: 100%;
            justify-content: space-between;
            border-bottom: 1px solid #E6E6E6;
            line-height: 40px;
            height: 40px;
            padding: 0 8px;
        }

        .key {}

        .val {
            min-width: 220px;
        }
    }

    .info-pad {
        margin: 0 16px;
    }

</style>
